<template>
  <div class="my_page">

    <!-- 用户头像信息 开始 -->
    <div class="user_info">
      <div class="avatar">
        <li-image :src="userInfo.avatar" class="img" round v-if="userInfo.avatar"></li-image>
        <van-image :src="require('@/assets/images/avatar_user.png')" class="img" lazy-load v-else />
      </div>
      <div class="info">
        <nuxt-link to="/my/login" class="a_link" v-if="!isLogin">
          <span>登录/注册</span>
          <van-icon name="arrow" class="van_arrow" />
        </nuxt-link>
        <nuxt-link to="/my/info" class="a_link" v-else>
          <span>{{ userInfo.account || userInfo.phone }}</span>
          <van-icon name="arrow" class="van_arrow" />
        </nuxt-link>
        <h2 class="h2">Hi~欢迎来到邦正口腔，帮你更好解决口腔问题</h2>
      </div>
    </div>
    <!-- 用户头像信息 end -->

    <!-- vip信息 开始 -->
    <div class="vip_box">
      <div class="vip_inner">
        <img src="@/assets/images/my/icon_vip.png" class="img" alt="">
        <span>免费获取您的专属口腔报告</span>
        <div class="btn" @click="goPage('/report/add')">
          <img src="@/assets/images/my/btn.png" class="btn" alt="立即获取">
        </div>
        
        <!-- <button class="btn">立即获取</button> -->
      </div>
    </div>
    <!-- vip信息 end -->

    <!-- 菜单 开始 -->
    <div class="menu_box">

      <div class="menu_list">
        <div class="menu_cell" @click="goPage('/my/review')">
          <img src="@/assets/images/my/my_02.png" alt="">
          <span>我的点评</span>
        </div>
        <div class="menu_cell" @click="goPage('/my/book')">
          <img src="@/assets/images/my/my_04.png" alt="">
          <span>我的预约</span>
        </div>
        <div class="menu_cell" @click="goPage('/my/focus')">
          <img src="@/assets/images/my/my_03.png" alt="">
          <span>我的关注</span>
        </div>
        <div class="menu_cell" @click="goPage('/report/add')">
          <img src="@/assets/images/my/my_01.png" alt="">
          <span>我的报告</span>
        </div>
      </div>
    </div>
    <!-- 菜单 end -->

    <div class="cell_list">
      <div class="cell">
        <div class="left">
          <img src="@/assets/images/my/icon_01.png" class="img" alt="">
          <span>官方客服</span>
        </div>
        <div class="right" @click="makePhone('0755-23728316')">
          <span>0755-23728316</span>
          <van-icon name="arrow" class="van_icon" />
        </div>
      </div>

      <nuxt-link class="cell" to="/questions/list">
        <div class="left">
          <img src="@/assets/images/my/icon_02.png" class="img" alt="">
          <span>社区问答</span>
        </div>
        <div class="right">
          <van-icon name="arrow" class="van_icon" />
        </div>
      </nuxt-link>

      <nuxt-link class="cell" to="/my/join">
        <div class="left">
          <img src="@/assets/images/my/icon_03.png" class="img" alt="">
          <span>机构入驻</span>
        </div>
        <div class="right">
          <van-icon name="arrow" class="van_icon" />
        </div>
      </nuxt-link>

      <nuxt-link class="cell" to="/my/about">
        <div class="left">
          <img src="@/assets/images/my/icon_04.png" class="img" alt="">
          <span>关于哩哩</span>
        </div>
        <div class="right">
          <van-icon name="arrow" class="van_icon" />
        </div>
      </nuxt-link>
    </div>

  </div>
</template>
<script>
import { PLATFORM_TYPE,GET_PERSONAL_INFO,GET_SEO_SETTING_INFO } from '@/http/interface'
export default {
  data() {
    return {
      isLogin: false,
      userInfo: {},
      seoInfo:{}
    };
  },
  head() {
    return {
      title: this.seoInfo.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.seoInfo.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.seoInfo.keywords,
        },
      ],
      link:[
        {ref:'canonical',href:`${this.$domain}/my`}
      ]
    };
  },
  async asyncData({ $cookies,$axios }) {
    let token = $cookies.get("token");
    let userInfo = $cookies.get("user") || {}
    if (token) {
      let res = await $axios.get(GET_PERSONAL_INFO)
      userInfo = res.data || {}
    }

    // 获取seo配置
    let seo = await $axios.get(GET_SEO_SETTING_INFO, {
      params: { type: 11, platform: PLATFORM_TYPE },
    });
    let seoInfo = seo.data || {};
    return {
      isLogin: token ? true : false,
      userInfo,
      seoInfo
    };
  },
  
  methods: {
    // 页面跳转
    goPage(url) {
      let token = this.$cookies.get('token');
      console.log(token)
      let _path = url;
      if (!token) {
        _path = '/my/login'
      }
      this.$router.push({
        path: _path,
      });
    },

    // 拨打电话
    makePhone(phone) {
      if (!phone) {
        return false;
      }
      window.location.href = `tel://${phone}`;
    },

  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/my.less";
</style>